<template>
  <div>
    <div v-if="listData.status !== 'NOT_STARTED'" class="comment-box">
      <div class="clearfix" style="padding: 0 40px; margin-bottom: 40px;">
        <el-input
          v-model="commentTxt"
          class="comment-val"
          type="textarea"
          :rows="3"
          placeholder="说点什么吧…"
          resize="none"
        />
        <div class="fr marginT20">
          <el-button
            type="success"
            class="btn-color fs-14"
            style="width: 120px; height: 36px;"
            size="small"
            @click="getComment(commentTxt)"
          >评论</el-button>
        </div>
      </div>
      <div v-for="(item, index) in commentPageList" :key="index">
        <div v-if="index < commentPageOpen" class="comment">
          <div class="left">
            <el-image class="img" :src="item.userHead" />
          </div>
          <div class="center">
            <div class="name">{{ item.userName }}</div>
            <div class="describe">{{ item.content }}</div>
          </div>
          <div class="right">
            <div class="time">{{ item.createTime }}</div>
            <el-button
              type="success"
              style="width: 74px"
              size="mini"
              class="btn-color"
              @click="replyCommentInx = index + '-'"
            >回复</el-button>
          </div>

          <div
            v-if="item.replyCount > 0 && item.children <= 0"
            class="more-txt"
            @click="getReplyPage(item, index)"
          >
            展开回复
            <span style="position: relative; top: 4px;}">﹀</span>
          </div>
        </div>

        <div
          v-if="index + '-' === replyCommentInx"
          class="clearfix"
          style="padding: 0 40px 50px 204px"
        >
          <el-input
            v-model="replyCommentTxt"
            class="comment-val"
            type="textarea"
            :rows="3"
            placeholder="说点什么吧…"
            resize="none"
          />
          <div class="fr marginT20">
            <el-button
              type="success"
              class="btn-color fs-14"
              style="width: 120px; height: 36px;"
              size="small"
              @click="getComment(replyCommentTxt, item, index)"
            >评论</el-button>
          </div>
        </div>

        <div v-if="item.children && item.children.length > 0" style="position: relative;">
          <div v-for="(itemChild, inxChild) in item.children" :key="inxChild">
            <div class="comment replyComment">
              <div class="left">
                <el-image class="img" style="width: 70px;" :src="itemChild.userHead" />
              </div>
              <div class="center" style="display: flex;">
                <div class="name">{{ itemChild.userName }}</div>
                <div class="describe">
                  <span>{{ itemChild.replyName }}：</span>
                  <span>{{ itemChild.content }}</span>
                </div>
              </div>
              <div class="right">
                <div class="time">{{ itemChild.createTime }}</div>
                <el-button
                  style="width: 74px"
                  type="success"
                  size="mini"
                  class="btn-color"
                  @click="replyCommentInx = index + '-' + inxChild"
                >回复</el-button>
              </div>
            </div>
            <div
              v-if="index + '-' + inxChild === replyCommentInx"
              class="clearfix"
              style="padding: 0 40px 50px 204px"
            >
              <el-input
                v-model="replyCommentTxt"
                class="comment-val"
                type="textarea"
                :rows="3"
                placeholder="说点什么吧…"
                resize="none"
              />
              <div class="fr marginT20">
                <el-button
                  type="success"
                  class="btn-color fs-14"
                  style="width: 120px; height: 36px;"
                  size="small"
                  @click="
                    getComment(
                      replyCommentTxt,
                      item,
                      index,
                      itemChild,
                      inxChildx
                    )
                  "
                >评论</el-button>
              </div>
            </div>
          </div>

          <div class="more-txt" @click="removeReplyPage(item, index)">
            收起回复
            <span style="position: relative; top: -4px;}">︿</span>
          </div>
        </div>
      </div>
      <div v-if="commentPageList && commentPageList.length > 0">
        <div v-if="commentPageOpen === 4" class="more" @click="openCommentList">查看更多评论</div>
        <div v-else class="more" @click="openCommentList">收起评论</div>
      </div>
    </div>
    <div v-else class="comment-box text-center">暂无其他评论</div>
  </div>
</template>

<script>
import { commentPage, comment, replyPage } from '@/api/basic'

export default {
  name: 'Comment',
  props: ['list', 'commentType'],
  data () {
    return {
      listData: this.list,
      subjectType: this.commentType,
      commentTxt: null, // 评论
      replyCommentTxt: null, // 回复评论
      replyCommentInx: null, // 回复索引
      commentPageQuery: {
        condition: {
          keyword: null,
          status: null,
          subjectId: null,
          subjectType: this.commentType,
          userId: null
        },
        pager: {
          page: 1,
          pageSize: 20
        }
      },
      commentPageList: null,
      commentPageTotal: null,
      commentPageOpen: 4
    }
  },
  computed: {
  },
  watch: {
  },
  created () {
    console.log('commentType:', this.commentType)
    this.getCommentPage()
  },
  methods: {

    getComment (text, items, index, itemChild, itemChildInx) {
      var commentObj = {
        content: null,
        pid: items && items.id ? items.id : null,
        subjectId: this.listData.subjectId,
        subjectType: this.subjectType
      }
      if (items && itemChild) {
        commentObj.content = '回复' + itemChild.userName + '：' + text
      } else if (items) {
        commentObj.content = '回复' + items.userName + '：' + text
      } else {
        commentObj.content = text
      }

      comment(commentObj).then(res => {
        var inx = res.data.content.indexOf('：')
        res.data.replyName = res.data.content.substring(0, inx)
        res.data.content = res.data.content.substring(inx + 1, res.data.content.length)

        if (items) {
          this.replyCommentInx = null
          this.replyCommentTxt = null
          this.commentPageList[index].children.unshift(res.data)
        } else {
          this.commentPageList.unshift(res.data)
        }
        this.$message({
          message: '评论成功',
          type: 'success'
        })
      })
    },

    getCommentPage () {
      this.commentPageQuery.condition.status = 'OK'
      this.commentPageQuery.condition.subjectId = this.listData.subjectId
      commentPage(this.commentPageQuery).then(res => {
        res.data.records.map(item => {
          item.children = new Array()
        })
        this.commentPageList = res.data.records
        this.commentPageTotal = res.data.total
      })
    },

    getReplyPage (item, index) {
      replyPage({
        condition: {
          id: item.id,
          showOk: true
        },
        pager: {
          page: 1,
          pageSize: 999
        }
      }).then(res => {
        res.data.records.map(item => {
          var inx = item.content.indexOf('：')
          item.replyName = item.content.substring(0, inx)
          item.content = item.content.substring(inx + 1, item.content.length)
        })
        this.commentPageList[index].children = res.data.records
      })
    },

    openCommentList () {
      console.log(this.commentPageOpen, this.commentPageList.length)
      this.commentPageOpen =
        this.commentPageOpen <= 4 ? this.commentPageList.length : 4
    },
    removeReplyPage (item, index) {
      this.commentPageList[index].children = []
    }

  }
}
</script>

<style lang='scss' scoped>
.comment-box {
  margin-top: 24px;
  background-color: white;
  border-radius: 16px;
  padding: 40px 0;

  .comment-val {
    border-radius: 8px;
  }
  .comment {
    border-top: 1px solid #dbdadd;
    padding: 40px 0;
    display: flex;
    position: relative;

    .left {
      position: relative;
      padding-left: 40px;
      padding-right: 16px;
      .img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        overflow: hidden;
      }
    }
    .left:after {
      content: "";
      display: block;
      clear: both;
      width: 100%;
      height: 3px;
      background-color: white;
      position: absolute;
      bottom: -41px;
      left: 0;
      z-index: 10;
    }
    .center {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      overflow: hidden;
      padding-right: 40px;
      .name {
        font-size: 16px;
        font-family: AppleSystemUIFont;
        color: rgba(0, 0, 0, 0.85);
        line-height: 24px;
      }
      .describe {
        font-size: 16px;
        font-family: AppleSystemUIFont;
        color: rgba(0, 0, 0, 0.45);
        line-height: 24px;
        display: flex;
        span {
          display: block;
          color: rgba(0, 0, 0, 0.85);
        }

        span:last-child {
          flex: 1;
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
    .right {
      padding-right: 40px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-end;
      .time {
        font-size: 16px;
        font-family: AppleSystemUIFont;
        color: rgba(0, 0, 0, 0.25);
        line-height: 24px;
      }
    }
  }

  .replyComment {
    padding-left: 84px;

    .left:after {
      left: -84px;
    }
  }
  .more-txt {
    position: absolute;
    left: 50%;
    bottom: 0;
    color: #54b87b;
    cursor: pointer;
    padding: 4px 10px;
  }
  .more {
    border-top: 1px solid #dbdadd;
    cursor: pointer;
    margin-top: 5px;
    padding-top: 40px;
    text-align: center;
    font-size: 16px;
    font-family: AppleSystemUIFont;
    color: rgba(84, 184, 123, 1);
    line-height: 24px;
  }
}
</style>
